<ion-view view-title="Search">
  <ion-nav-buttons side="left">
    <i class="icon icon-customerService" style="font-size: 28px;margin-top: 5px;margin-left: 13%;color: #fff">
    </i>
  </ion-nav-buttons>

  <ion-nav-title>
    <!--<div class="bar bar-header item-input-inset"  style=" padding:8px 0; width: 80%;margin-left: auto;margin-right: auto;z-index: 9999;background-color: #65c178"  ng-click="focus()" >-->
      <!--<label class="item-input-wrapper" style="background-color: #fff; line-height: 30px;">-->
        <!--<input > -->
        <!--<i class="icon  ion-ios-search-strong placeholder-icon" style="color: #b5b5b5;font-size: 20px;margin-left: 5px;"></i>-->
        <!--<span style="color: #b5b5b5">Search entire store here...</span>-->
      <!--</label>-->
    <!--</div>-->
    <div class="bar bar-header item-input-inset"  style=" padding:8px 0; width: 100%;margin-left: auto;margin-right: auto;z-index: 9999;background-color: #65c178"  >
      <label class="item-input-wrapper"  style="background-color: #fff; line-height: 30px;">
        <i class="icon  ion-ios-search-strong placeholder-icon" style="color: #b5b5b5;font-size: 20px;margin-left: 5px;"></i>
        <input id="mysearch" type="search" placeholder="Search entire store here..." ng-model="searchName" style="color:#666 !important;text-align: left" ng-change="search(searchName)" ng-focus="focus()" >
      </label>
    </div>
  </ion-nav-title>


  <ion-nav-buttons side="right">
    <i class="icon icon-rightCart" style="font-size: 28px;margin-top: 5px;margin-left: -13%;color: #fff">
    </i>
    <span style="display:inline-block;width:16px; height:16px; border-radius: 20%; background: #e8631e; color:#fff; text-align: center; line-height: 16px; font-size: 3vw; position: absolute; left: 13px; ">3</span>
  </ion-nav-buttons>
  <ion-content>
    <div style="width: 94%;height: 37px;line-height: 37px;margin-left: 3%;color: #666666;border-bottom: #e5e5e5 1px solid"><b>Recent Searches</b></div>
    <div class="searchHistory">sasa</div>
    <div class="searchHistory">sasasds</div>
    <div class="searchHistory">sasasdsds</div>
    <div class="searchHistory">sasasfdsfdsfdsfdsfdsffffffffffffff</div>
    <div style="width: 100%;height: 8px;float: left;border-bottom: #e5e5e5 1px solid"></div>

    <div style="width: 94%;height: 37px;line-height: 37px;margin-left: 3%;color: #666666;border-bottom: #e5e5e5 1px solid;float: left"><b>Popular Searches</b></div>
    <ul style="float: left;width: 94%;margin-left: 3%">
      <li class="customLi">asas
        <i class="icon ion-ios-arrow-right" style="font-size: 28px;float: right;color: #666666">
        </i>
      </li>
      <li class="customLi">cafrt
        <i class="icon ion-ios-arrow-right" style="font-size: 28px;float: right;color: #666">
        </i>
      </li>
      <li class="customLi">sdfsd
        <i class="icon ion-ios-arrow-right" style="font-size: 28px;float: right;color: #666">
        </i>
      </li>
      <li class="customLi">asas
        <i class="icon ion-ios-arrow-right" style="font-size: 28px;float: right;color: #666">
        </i>
      </li>
    </ul>
  </ion-content>
  <style type="text/css">
    .bar.bar-stable .title{color: #fff}
    .bar.item-input-inset .item-input-wrapper input{padding-left: 0px;height: 27px;}
    .searchHistory{height: 28px;line-height:28px;background: #f7f7f7;color: #666666;border-radius: 6px;padding-left: 9px;padding-right: 10px;margin-top: 8px;float: left;margin-left: 3%}
    .customLi{height: 28px;line-height: 25px;width: 100%;border-bottom: #e5e5e5 1px solid;padding-left: 2px;color: #666666;}
  </style>
</ion-view>
